<template>
    <div class="page">
        <div class="login-head">
            <img style="width: 86px;" src="./img/login_logo.png"/>
        </div>
        <form class="form-box">
            <div class="put-box">
                <img src="./img/icon_regUser.png"/>
                <input type="text" v-model="phone" placeholder="手机号"/>
            </div>
            <div class="put-box">
                <img src="./img/icon_regem.png"/>
                <input
                        style="width: 50%;"
                        type="text"
                        v-model="vCode"
                        placeholder="短信验证码"
                />
                <div style="color: #FF9300;font-size: 14px;" v-if="!codeSend" @click="sendCode">
                    发送验证码
                </div>
                <div style="color: #FF9300;font-size: 14px;" v-if="codeSend">{{ second }}S后重发</div>
            </div>
        </form>
        <div class="change-box">
            <input type="checkbox"/>
            <p>我已阅读并同意《使用条款隐私协议》</p>
        </div>
        <input @click="onSubmit" class="submit-btn" type="submit" value="注册"/>
        <div class="go-login" @click="goLogin">立即登录</div>
    </div>
</template>

<script>
    import {getCode , postCodeLogin} from "../../api/login"
    import {setToken , setUserId , getChannelId} from "../../util/auth";
    export default {
        comments: {},
        created() {
        },
        data() {
            return {
                second: 60,
                codeSend: false,
                phone: null,
                vCode: null
            };
        },
        methods: {
            sendCode: function () {
                if (this.phone == null) {
                    this.$createDialog({
                        type: 'alert',
                        title: '温馨提示',
                        content: '请输入手机号码',
                        icon: 'cubeic-warn'
                    }).show()
                    return
                }
                this.codeSend = true
                let setTime = setInterval(() => {
                    this.second--
                    if (this.second == 0) {
                        clearInterval(setTime)
                        this.codeSend = false
                        this.second = 60
                    }
                }, 1000)
                getCode(this.phone).then(res => {
                })
            },
            onSubmit: function () {
                console.log(this.phone)
                console.log(this.vCode)
                if (this.phone == null) {
                    this.$createDialog({
                        type: 'alert',
                        title: '温馨提示',
                        content: '请输入手机号码',
                        icon: 'cubeic-warn'
                    }).show()
                    return
                }
                if (this.vCode == null) {
                    this.$createDialog({
                        type: 'alert',
                        title: '温馨提示',
                        content: '请输入手机验证码',
                        icon: 'cubeic-warn'
                    }).show()
                    return
                }
                postCodeLogin(this.phone, this.vCode, getChannelId()).then(res=> {
                    if (res.code == 10000) {
                        let loginToken = res.data.token
                        let userId = res.data.userId
                        setToken(loginToken)
                        setUserId(userId)
                        this.$router.push({
                            path: "/mine"
                        })
                    }

                })
            },
            goLogin: function () {
                this.$router.push({
                    path: "/login"
                })
            }
        }
    };
</script>
<style scoped type="text/stylus" lang="stylus"></style>
<style scoped type="text/stylus" lang="stylus">
    .page
        position fixed;
        top 0;
        bottom 0;
        left 0;
        right 0;

        .go-login
            font-size 14px;
            color #5461eb;
            text-align center;
            margin-top 1rem;

        .login-head
            height 5rem;
            background-image url("./img/login_img.png");
            background-size 100% 100%;
            display flex;
            justify-content center;
            align-items center;

        .form-box
            display flex;
            flex-direction column;
            align-items center;
            padding-top 0.5rem;

            .put-box
                width 60%;
                display flex;
                justify-content start;
                align-items center;
                border-bottom 1px #eee solid;
                margin-top 0.4rem;

                img
                    width 14px;
                    height auto;

                input
                    margin-left 0.2rem;
                    border none;
                    width 60%;
                    outline: none;
                    font-size 16px;
                    padding 0.2rem 0.1rem;

        .change-box
            width 65%;
            display flex;
            justify-content start;
            align-items center;
            margin 3rem auto 0 auto;

            p
                margin-left 0.15rem;
                font-size 12px;

        .submit-btn
            width 56%;
            background-color #4564f2;
            border-radius 30px;
            height 1.2rem;
            line-height 1.2rem;
            font-size 17px;
            color #fff;
            margin-left 22%;
            margin-top 0.8rem;
            outline none
</style>
